<template>
  <div>
    <shuru @add="handleAdd" />
    <liebiao :data="arr" @del="handledelete" />
  </div>
</template>
<script>
import shuru from "./shuru.vue";
import liebiao from "./liebiao.vue";
export default {
  methods: {
    handleAdd(input) {
      console.log(input);
      this.arr.push(input);
    },
    handledelete(input) {
      console.log(input);
      this.arr = this.arr.filter((item) => item.id !== input);
    },
  },
  data() {
    return {
      arr: [
        {
          id: 1,
          code: 1,
          imgSrc:
            "https://tse1-mm.cn.bing.net/th/id/R-C.fc48d5b3c65b7b79980ab09dfc2890d8?rik=jy07dRFBQAwjzw&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190322%2fe2edee9d2ee847f0b564fcbadf356a46.jpeg&ehk=cKT9XpGfozyLcO5sia93t8gLeJurN9RM%2boqkkCk6a7Q%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
          productName: "坤坤的背带裤",
          price: 9.9,
          total: 9.9,
          count: 1,
        },
        {
          id: 2,
          code: 2,
          imgSrc:
            "https://tse3-mm.cn.bing.net/th/id/OIP-C.U2zPWJK7Gus24zXyQWwi0AHaEG?pid=ImgDet&rs=1",
          productName: "品如的衣服",
          price: 19.9,
          total: 19.9,
          count: 1,
        },
        {
          id: 3,
          code: 3,
          imgSrc:
            "https://static1.paizi.com/uploadfile/2018/0710/20180710095354871.jpg",
          productName: "秀儿的秋裤",
          price: -9.9,
          total: -9.9,
          count: 1,
        },
      ],
    };
  },
  components: {
    shuru,
    liebiao,
  },
};
</script>
<style>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>
